Typography is the art and technique of arranging text so that it is readable, clear, visually balanced, and appropriate for the purpose of a design. In Figma, typography is one of the most important parts of UI design because text communicates headings, descriptions, buttons, navigation, labels, forms, messages, and other information.
Figma provides typography controls for font family, font weight, font size, line height, letter spacing, alignment, text resizing, text styles, OpenType features, variable fonts, text decoration, case transformation, lists, and other properties. These controls help designers create consistent and scalable typography systems. JustAcademy Figma Training can help you learn Figma systematically, and you can use Register for Figma Course Demo to explore the course.
Typography is the process of selecting, arranging, sizing, spacing, and styling text to make information easy to read and visually effective. Good typography creates hierarchy, improves usability, supports branding, and helps users understand the structure of a page.
Typography
|
+-- Font Family
+-- Font Style
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
+-- Text Alignment
+-- Text Color
+-- Text Case
+-- Text Decoration
+-- Text Resizing
+-- Text Styles
+-- OpenType Features
Typography is not simply about making text look attractive. It directly affects readability, hierarchy, navigation, accessibility, brand identity, and the overall user experience.
Figma provides text-specific properties in the Typography section of the right sidebar. Designers can select a text layer and modify its font, style, size, line height, letter spacing, alignment, and additional type settings.
Text Layer Selected
|
v
Typography Panel
|
+-- Text Style
+-- Font Family
+-- Font Weight / Style
+-- Font Size
+-- Line Height
+-- Letter Spacing
+-- Horizontal Alignment
+-- Vertical Alignment
+-- Type Settings
Figma provides the Text tool for creating text layers. You can select the Text tool from the toolbar or use the T keyboard shortcut.
Keyboard Shortcut:
T
Text Tool
|
v
Click Canvas
|
v
Type Text
|
v
Select Text Layer
|
v
Adjust Typography
When creating text in Figma, you can click once to create an automatically resizing text layer or click and drag to create a text layer with defined dimensions. These behaviors are important when designing headings, paragraphs, cards, and responsive layouts.
| Method | Behavior | Common Use |
|---|---|---|
| Click once | Text can grow horizontally | Short headings, labels, buttons |
| Click and drag | Creates a defined text area | Paragraphs, descriptions, content blocks |
A typeface is a designed collection of letterforms and glyphs that share a consistent visual character. Examples include serif, sans-serif, monospace, script, and display typefaces.
The typeface determines the overall personality of the text and can strongly influence the visual identity of a product.
A font refers to a specific digital representation of a typeface, including particular characteristics such as weight and style. For example, a typeface family can have Regular, Medium, Bold, and Italic fonts.
Typeface Family
|
+-- Light
+-- Regular
+-- Medium
+-- Semibold
+-- Bold
+-- Black
+-- Italic
A font family is a collection of related font styles and weights. Selecting a font family is one of the first decisions in a typography system.
Common UI font families include Inter, Roboto, Open Sans, Poppins, and many others. The correct choice depends on the product, audience, brand, readability requirements, and language support.
Serif fonts contain small decorative strokes or extensions at the ends of letterforms. They are commonly associated with editorial, traditional, literary, and formal visual styles.
Serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Serif fonts can work well for headings, editorial interfaces, publications, and branding when their visual character supports the design.
Sans-serif fonts do not have the decorative strokes associated with serif typefaces. They are widely used in modern websites, mobile applications, dashboards, and product interfaces.
Sans Serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Sans-serif fonts are often selected for UI systems because many families provide clear shapes and multiple weights.
In monospace fonts, characters occupy equal horizontal space. They are commonly used for code, terminal interfaces, technical information, numbers, and developer-focused interfaces.
Monospace
MMMMMMMMMM
1111111111
XXXXXXXXXX
Script fonts are designed to resemble handwriting or calligraphy. They can create expressive and decorative designs but should be used carefully in interfaces because readability can decrease at small sizes.
Display fonts are designed primarily for large text such as headlines, posters, banners, and marketing graphics. They often have distinctive visual personalities.
Display fonts should generally be used selectively rather than for large amounts of body copy.
Font weight controls how thick or visually heavy the characters appear. Different font families provide different weight ranges.
| Weight | Typical Purpose |
|---|---|
| Thin | Decorative or large display text |
| Light | Large secondary headings |
| Regular | Body text |
| Medium | Labels and emphasized content |
| Semibold | Subheadings and buttons |
| Bold | Important headings |
| Black | Strong display typography |
Not every font family provides all these weights, so designers should choose from the weights actually available in the selected typeface.
Font size controls the scale of text. Larger sizes generally create stronger visual hierarchy, while smaller sizes are useful for supporting information.
Display Heading
48px
Page Heading
32px
Section Heading
24px
Body
16px
Small Text
14px
Caption
12px
These values are common starting points rather than mandatory rules. The correct size depends on the font, platform, content, and visual system.
A typography scale is a structured set of font sizes used throughout a design system. It helps maintain predictable hierarchy and consistency.
| Style | Example Size | Typical Use |
|---|---|---|
| Display | 48px | Hero heading |
| H1 | 36px | Page title |
| H2 | 28px | Major section |
| H3 | 24px | Subsection |
| Body Large | 18px | Introductory content |
| Body | 16px | Normal content |
| Small | 14px | Supporting information |
| Caption | 12px | Metadata and captions |
Line height controls the vertical distance between lines of text. It is especially important for paragraphs and multi-line content because insufficient spacing can make text difficult to read.
Line Height Too Small
This is a line of text.
This is another line.
This is another line.
Balanced Line Height
This is a line of text.
This is another line.
This is another line.
Figma supports line height values such as Auto, fixed values, and percentage-based values. The appropriate value depends on font size, font family, content length, and design context.
Letter spacing controls the horizontal space between characters in a text selection or text layer. It is also commonly called tracking in typography contexts.
Normal:
TYPOGRAPHY
Increased Letter Spacing:
T Y P O G R A P H Y
Reduced Letter Spacing:
TYPOGRAPHY
Large headings may sometimes benefit from slightly tighter spacing, while uppercase labels may benefit from additional spacing.
| Property | Meaning |
|---|---|
| Letter Spacing | Controls spacing across a selection or text range |
| Kerning | Adjusts spacing between specific pairs of characters |
| Tracking | Common typography term for overall character spacing |
Text alignment controls how text is positioned horizontally within its text box. Common alignment options include left, center, right, and justified.
| Alignment | Typical Use |
|---|---|
| Left | Body text, forms, navigation, most UI content |
| Center | Hero headings, empty states, promotional content |
| Right | Specific data and numerical layouts |
| Justified | Some editorial and print-style layouts |
Vertical alignment controls how text is positioned vertically within its text box. Common options include top, middle, and bottom.
Top
+----------------+
| Text |
| |
| |
+----------------+
Middle
+----------------+
| |
| Text |
| |
+----------------+
Bottom
+----------------+
| |
| |
| Text |
+----------------+
Text color determines the visual contrast between text and its background. Typography color should support hierarchy while maintaining sufficient readability.
| Text Type | Typical Treatment |
|---|---|
| Primary Text | Strongest text color |
| Secondary Text | Lower visual emphasis |
| Disabled Text | Reduced emphasis |
| Link | Brand or interactive color |
| Error | Error semantic color |
| Success | Success semantic color |
Typography hierarchy helps users understand which information is most important. Hierarchy can be created using size, weight, color, spacing, position, and contrast.
1. Main Heading
Large + Bold
2. Section Heading
Medium + Semibold
3. Body Text
Regular + Comfortable Line Height
4. Supporting Text
Smaller + Lower Emphasis
5. Caption
Small + Secondary Color
Headings introduce sections and establish the structure of a page. A good heading system uses consistent sizes, weights, and spacing.
H1 - Page Title
H2 - Main Section
H3 - Subsection
H4 - Minor Section
Headings should be visually distinguishable without creating unnecessary differences between every level.
Body text contains the primary information users need to read. It should prioritize readability over decorative appearance.
Labels identify form fields, controls, categories, and interface elements. They are usually smaller than major headings but should remain clearly readable.
Email Address
[____________________________]
Password
[____________________________]
Button text should be easy to scan and clearly communicate the action. Weight, size, letter spacing, and capitalization should be consistent across the button system.
| Button Type | Typography Example |
|---|---|
| Primary | Medium/Semibold, 14px-16px |
| Secondary | Medium/Semibold, 14px-16px |
| Small Button | Medium, 12px-14px |
| Large CTA | Semibold, 16px-18px |
Navigation text should be easy to scan and visually consistent. Active and inactive navigation items should have distinguishable states.
Home Products Pricing About Contact
^^^^
Active item
Typography does not work independently from layout spacing. The distance between headings, paragraphs, buttons, and other elements contributes to visual hierarchy.
Heading
|
| 24px
v
Paragraph
|
| 16px
v
Button
Consistent spacing creates rhythm and makes content easier to scan.
Very long lines of text can make reading difficult because the user's eyes must travel too far from one side of the screen to the other. Paragraph width should therefore be controlled, especially on desktop interfaces.
Good Reading Width
+--------------------------------+
| This paragraph contains a |
| manageable number of words per |
| line, making it easier to read.|
+--------------------------------+
Text resizing determines how a text layer behaves when its content changes. Figma provides resizing behaviors that are useful for responsive layouts.
| Behavior | Purpose |
|---|---|
| Auto Width | Text grows horizontally based on content |
| Auto Height | Text wraps within a width while height adjusts |
| Fixed Size | Text remains inside defined dimensions |
Auto Width is useful for short text such as labels, navigation items, badges, and buttons where the text should grow horizontally.
[ Submit ]
|
Text changes
v
[ Submit Order ]
Auto Height is useful for paragraphs and content blocks where the width is controlled but the height needs to expand when the text wraps onto additional lines.
Fixed Width
+----------------------+
| This paragraph |
| wraps onto multiple |
| lines automatically. |
+----------------------+
Height grows
Fixed-size text maintains both its width and height. It can be useful when creating controlled layouts, but designers should carefully check for text overflow.
Text overflow occurs when content does not fit within its available area. Designers should consider whether the text should wrap, truncate, resize, or expand the container.
Content
|
+-- Fits
|
+-- Wrap
|
+-- Truncate
|
+-- Expand Container
Truncation hides text beyond a defined number of lines or available space. It is useful for cards, tables, notifications, and compact interfaces.
Product description:
This is a long description that contains
more information than the card can display...
Displayed:
This is a long description that contains
more information than the...
Typography can use different letter cases such as uppercase, lowercase, capitalize, and small caps where supported.
| Case | Example | Typical Use |
|---|---|---|
| Uppercase | PRODUCTS | Small labels and navigation |
| Lowercase | products | Specific brand styles |
| Capitalize | Products | Titles and labels |
| Small Caps | ᴘʀᴏᴅᴜᴄᴛs | Editorial and decorative typography |
Text decoration adds visual indicators such as underline and strikethrough. Underlines are commonly used for links, while strikethrough can communicate removed or previous values.
Normal Text
Underlined Link
Strikethrough Text
Links should be visually distinguishable from ordinary text. Color, underline, weight, or other visual treatments can communicate that text is interactive.
Learn more about Figma
^^^^^^^^^^^^^^^
Interactive Link
Text styles allow designers to save a collection of typography properties and reuse them across designs. A text style can include properties such as font family, weight, size, line height, letter spacing, paragraph spacing, decoration, case transformation, lists, and supported OpenType settings.
Text Styles
|
+-- Display/Large
+-- Heading/H1
+-- Heading/H2
+-- Heading/H3
+-- Body/Large
+-- Body/Regular
+-- Body/Small
+-- Label/Medium
+-- Caption/Small
A clear naming system makes typography easier to manage in large projects.
Typography
|
+-- Display
| +-- Display/Large
| +-- Display/Medium
|
+-- Heading
| +-- Heading/H1
| +-- Heading/H2
| +-- Heading/H3
|
+-- Body
| +-- Body/Large
| +-- Body/Regular
| +-- Body/Small
|
+-- Label
| +-- Label/Medium
|
+-- Caption
+-- Caption/Small
A typography system defines how text should look throughout a product. It includes font families, sizes, weights, line heights, spacing, hierarchy, and semantic roles.
Typography System
|
+-- Font Family
+-- Font Weights
+-- Font Sizes
+-- Line Heights
+-- Letter Spacing
+-- Text Styles
+-- Semantic Roles
+-- Responsive Rules
Semantic typography means naming text styles according to their role instead of only their visual properties.
| Semantic Name | Purpose |
|---|---|
| Page Title | Main page heading |
| Section Heading | Major content section |
| Body Primary | Main readable content |
| Body Secondary | Supporting information |
| Button Label | Interactive actions |
| Caption | Metadata and supporting details |
Typography pairing means using two or more typefaces or styles together in a visually compatible way. A common approach is to use one family for headings and another for body text.
Heading
Serif / Display Font
|
v
Body
Sans-Serif Font
Another approach is to use one font family with multiple weights and sizes. This often creates a cleaner and easier-to-maintain UI system.
A single font family can provide a strong and consistent design system when it contains enough weights and styles.
Inter
|
+-- Regular -> Body
+-- Medium -> Labels
+-- Semibold -> Headings
+-- Bold -> Strong Headings
A multi-font system can combine different typefaces for contrast and brand personality.
Heading
|
+-- Serif
Body
|
+-- Sans Serif
Code
|
+-- Monospace
Using too many font families can make a design inconsistent, so a limited and intentional selection is generally easier to manage.
Variable fonts can provide a range of font variations within a single font file. Depending on the font, designers may be able to adjust axes such as weight, width, slant, or optical size.
Variable Font
|
+-- Weight
| 100 -------- 900
|
+-- Width
| Condensed --- Expanded
|
+-- Slant
| Upright ----- Italic
|
+-- Optical Size
OpenType features provide advanced typographic controls supported by individual fonts. Depending on the selected font, these can include alternate letterforms, stylistic sets, number styles, ligatures, small caps, fractions, and other features.
OpenType
|
+-- Ligatures
+-- Small Caps
+-- Alternate Glyphs
+-- Number Styles
+-- Fractions
+-- Stylistic Sets
+-- Character Variants
Numbers can have different typographic styles. For example, proportional figures use varying widths, while tabular or monospace figures use equal widths. This is especially useful in dashboards, financial tables, and data-heavy interfaces.
| Numeral Style | Useful For |
|---|---|
| Proportional Figures | General text and marketing content |
| Tabular Figures | Tables and financial data |
| Lining Figures | Modern UI and dashboards |
| Oldstyle Figures | Editorial typography |
Superscript positions characters above the normal baseline, while subscript positions characters below it. They are useful for mathematical notation, scientific content, units, and references.
Superscript: X²
Subscript: H₂O
Some fonts provide OpenType support for displaying fractions using appropriate numerator and denominator glyphs.
Normal:
1/2
Typographic Fraction:
½
Figma supports bulleted and numbered lists for text content. Lists are useful for instructions, feature descriptions, documentation, and structured content.
• First feature
• Second feature
• Third feature
1. First step
2. Second step
3. Third step
Paragraph spacing controls the distance between paragraphs. It can be used to separate ideas without manually inserting multiple blank lines.
Paragraph One
Text content goes here.
↓ spacing
Paragraph Two
More text content goes here.
Paragraph indentation moves the first line of a paragraph inward. It is more common in editorial layouts than in modern application UI, but it can be useful for specific content designs.
Text wrapping determines how lines break when content occupies multiple lines. Thoughtful wrapping helps maintain readable and visually balanced headlines and paragraphs.
Figma provides wrap-related controls that can help designers manage line breaks and paragraph appearance in different contexts.
Headlines often benefit from controlled line breaks. A balanced headline distributes words across lines so the text block has a visually pleasing shape.
Unbalanced:
Build better digital
products for modern
businesses and teams
Balanced:
Build better digital products
for modern businesses
and teams
For longer text, thoughtful wrapping can reduce awkward endings such as a single word being left alone on a line. This is useful for descriptions and body copy.
Typography should be tested across desktop, tablet, and mobile layouts. Large headings may require different sizes or wrapping behavior at smaller widths.
Desktop
H1: Large
Body: Comfortable
|
v
Tablet
H1: Medium
Body: Comfortable
|
v
Mobile
H1: Smaller
Body: Readable
Responsive typography should preserve hierarchy while fitting the available screen space.
Mobile interfaces have limited screen space, so typography needs careful control. Avoid excessively large headings that push important content below the fold, while also avoiding text sizes that become difficult to read.
Desktop interfaces provide more space, allowing larger headings and wider content areas. However, excessive line length can still reduce readability.
Accessible typography should be readable, sufficiently contrasted, and understandable across different users and devices. Typography should not depend solely on subtle differences in size or color to communicate important information.
Text must contrast sufficiently with its background. Reduced contrast can make interfaces difficult to read, particularly for small or secondary text.
High Contrast
Dark Text
████████████████
Light Background
Low Contrast
Light Gray Text
████████████████
Light Background
WELCOME BACK
^^^^^^^^^^^^
Display / Bold
Your Dashboard
^^^^^^^^^^^^^^
Heading / Semibold
View your latest activity and account information.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Body / Regular
View Details
^^^^^^^^^^^^
Button / Medium
Forms require clear typography for labels, placeholders, helper text, validation messages, and buttons.
Email Address
Please enter your work email.
Password
[ *************** ]
Must contain at least 8 characters.
[ Create Account ]
Each text element should have a clear semantic role and appropriate visual hierarchy.
Card designs typically contain a title, supporting description, metadata, and action. Typography should establish clear relationships between these elements.
+--------------------------------+
| Product Name |
| |
| Short product description |
| that explains the product. |
| |
| ₹999 View → |
+--------------------------------+
Dashboards contain large amounts of information, so typography must support quick scanning.
| Element | Typography Role |
|---|---|
| Dashboard Title | Strong heading |
| Metric Number | Large and prominent |
| Metric Label | Small supporting text |
| Table Header | Medium emphasis |
| Table Data | Readable body text |
| Chart Labels | Compact supporting text |
Design tokens can be used to represent typography decisions consistently. A typography token system can define font family, font size, weight, line height, and letter spacing.
Typography Tokens
|
+-- font/family/body
+-- font/family/heading
|
+-- font/size/xs
+-- font/size/sm
+-- font/size/md
+-- font/size/lg
+-- font/size/xl
|
+-- font/weight/regular
+-- font/weight/medium
+-- font/weight/semibold
+-- font/weight/bold
|
+-- line-height/body
+-- line-height/heading
Typography should be incorporated into reusable components. A button, input, card, navigation item, and modal should use defined typography rather than manually formatted text every time.
Component
|
+-- Layout
+-- Color
+-- Border
+-- Typography
|
+-- Font
+-- Size
+-- Weight
+-- Line Height
+-- Letter Spacing
Typography specifications should be easy for developers to inspect. Figma's properties and Dev Mode can expose details such as font family, size, weight, line height, and letter spacing, helping developers translate designs into code.
Figma Design
|
v
Typography Properties
|
+-- Font Family
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
|
v
Developer Implementation
Typography properties in Figma commonly map to CSS properties during web development.
.heading {
font-family: "Inter", sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
.body {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
}
Create a landing page and establish a complete typography hierarchy.
Landing Page
|
+-- Hero
| +-- Display
| +-- Body Large
| +-- Button Label
|
+-- Features
| +-- H2
| +-- Body
|
+-- Testimonials
| +-- H2
| +-- Body
|
+-- Footer
+-- Label
+-- Caption
Create a mobile application screen using a consistent typography system.
Create a dashboard using typography to establish a clear hierarchy.
Dashboard
^^^^^^^^^
H1
Total Revenue
^^^^^^^^^^^^^
₹8,45,000
^^^^^^^^^^
Large Metric
Compared with last month
^^^^^^^^^^^^^^^^^^^^^^^^
Secondary Text
View Report
^^^^^^^^^^^
Button Label
Create a reusable typography system containing:
Document font family, weight, size, line height, letter spacing, and semantic usage for each style.
Understand Content
|
v
Choose Typeface
|
v
Choose Font Weights
|
v
Create Type Scale
|
v
Set Line Heights
|
v
Set Letter Spacing
|
v
Create Text Styles
|
v
Apply to Components
|
v
Test Responsive Layouts
|
v
Check Accessibility
|
v
Developer Handoff
| Property | Purpose | Example |
|---|---|---|
| Font Family | Defines letterform design | Inter |
| Font Weight | Controls visual thickness | 400, 600, 700 |
| Font Size | Controls text scale | 16px |
| Line Height | Controls vertical line spacing | 24px |
| Letter Spacing | Controls character spacing | 0.2px |
| Alignment | Controls text positioning | Left |
| Case | Controls letter transformation | Uppercase |
| Decoration | Adds visual text treatment | Underline |
| Text Style | Stores reusable typography properties | Body/Regular |
Typography is the art and technique of arranging and styling text to make information readable, understandable, and visually effective.
A typeface is a designed collection of related letterforms and glyphs that share a visual style.
A font family is a collection of related styles and weights belonging to a typeface.
Font weight controls the visual thickness of characters, such as Regular, Medium, Semibold, or Bold.
Line height controls the vertical distance between lines of text and is important for readable paragraphs.
Letter spacing controls the horizontal space between characters in a text selection or layer.
Typography hierarchy is the organization of text according to importance using size, weight, spacing, color, and other visual properties.
Text styles allow designers to reuse consistent typography properties across a file or design system and make global updates easier.
Serif typefaces have decorative strokes at the ends of letterforms, while sans-serif typefaces do not.
Variable fonts can provide a range of typographic variations within a font file, such as weight, width, slant, or optical size depending on the font.
OpenType is a font technology that can provide advanced typographic features such as ligatures, alternate characters, number styles, and stylistic variations.
Typography improves readability, hierarchy, navigation, accessibility, brand identity, consistency, and the overall user experience.
Create a complete typography system for a modern e-commerce application.
Typography Basics are essential for every Figma designer because text is one of the primary ways users receive information from a digital interface. Understanding font families, font weights, font sizes, line heights, letter spacing, alignment, text resizing, hierarchy, text styles, and responsive behavior allows designers to create interfaces that are clear, consistent, readable, and professional.
A strong typography system should not depend on manually formatting every text layer. Instead, designers should establish a clear type scale, reusable text styles, semantic naming, consistent spacing, and appropriate responsive behavior. Figma's typography tools support these workflows and make it easier to maintain consistency across components and larger design systems.
To learn more about professional Figma design and build practical skills, visit JustAcademy Figma Training and use the Register for Figma Course Demo option.
